<!DOCTYPE html>
<html lang="cmn">
<head>
	<meta charset="UTF-8">
	<title>轮播图7</title>
	<style type="text/css">
		body,ul,ol{
			margin: 0;
			padding: 0;
		}
		li{
			list-style-type: none;
		}
		#box{
			width: 600px;
			height: 450px;
			position: relative;
			left: 400px;
			top: 20px;
			overflow: hidden;
		}
		img{
			border: none;
			vertical-align: top;
		}
		ul{
			width: 600px;
			height: 450px;
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: 1;
		}
		ol{
			position: absolute;
			right: 20px;
			bottom: 20px;
			z-index: 2;
		}
		ol>li{
			float: left;
			color: white;
			width: 20px;
			height: 20px;
			border: 1px solid #fff;
			margin-right: 10px;
		}
		ol .olShow{
			color: #fff;
			background-color: #f60;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><img src="pic/11.jpg" /></li>
			<li><img src="pic/22.jpg" /></li>
			<li><img src="pic/33.jpg" /></li>
			<li><img src="pic/44.jpg" /></li>
			<li><img src="pic/55.jpg" /></li>
			<li><img src="pic/66.jpg" /></li>
		</ul>
		
		<ol>
			<li class='olShow'>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ol>
	</div>



	
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			var oUL=document.getElementsByTagName('ul')[0];
			var ulLi=oUL.getElementsByTagName('li');					//ul中的li 的集合
			
			var oOL=document.getElementsByTagName('ol')[0];
			var olLi=oOL.getElementsByTagName('li');					//ol中的li 的集合
			
			var iNow=0;														//获取当前索引值
			
			ulLi[0].style.position='absolute';
			
			for(var i=0;i<olLi.length;i++){
				olLi[i].index=i;
				olLi[i].onmouseover=function(){
					
					if(iNow<this.index){
						ulLi[this.index].style.left=600+'px';
						$(ulLi).eq(iNow).animate({
						left:-600+'px'
					},2000);
					}else if(iNow>this.index){
						ulLi[this.index].style.left=-600+'px';
						$(ulLi).eq(iNow).animate({
						left:600+'px'
					},2000);
					}
					
					for(var i=0;i<olLi.length;i++){
						olLi[i].className=' ';
					}
					olLi[this.index].className='olShow';
					
					$(ulLi).eq(this.index).animate({
						left:0
					},2000);
					
					iNow=this.index;
				};
			}
			
			for(var i=1;i<olLi.length;i++){									//将第二到第五张图摆在右边
				ulLi[i].style.position='absolute';
				ulLi[i].style.left=600+'px';
				ulLi[i].style.top=0;
			}
			
		
			
			
		}
		
	</script>

</body>
</html>